<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>axios基本使用</title>
</head>

<body>
  <button id="btn1">点击发送 GET 请求</button>
  <button id="btn2">点击发送 GET 请求(async 和 await)</button>
  <button id="btn3">点击发送 POST 请求</button>
  <button id="btn4">点击发送 PUT 请求</button>
  <button id="btn5">点击发送 DELETE 请求</button>

  <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  <script>
    /* 
    - axios(config)  config为配置对象 => 对象内的属性/方法是固定的一些
      url  请求地址   可以包含param参数
      method 请求方式
      data  请求体参数(请求体有两种形式json形式，query查询字符串形式)
        值为对象: json格式
        a=1&b=2: query字符串格式
      params: get请求的query参数(查询字符串)    不是用来指定param参数
    - 返回值是promise对象
        如果成功了, value是response对象
          data: 响应体数据(已经解析好了)
          status: 响应状态码
        如果失败了, reason是error对象
          message: 错误信息
    */

    // get请求
    document.getElementById('btn1').onclick = function () {
      // http://localhost:3000/movie
      // 使用axios发请求
      axios({
        url: 'http://localhost:3000/movie',
        method: 'get',
        params: { //携带的是query参数(查询字符串)  params参数写在url中如：http://localhost:3000/movie/1
          id: 1
        }
      }).then(
        response => {
          console.log(response)
        },
        err => {
          console.log(err.message)
        }
      )

    }
    //get请求 async await
    document.getElementById('btn2').onclick = async () => {
      // get请求 async await
      try {
        let response = await axios({
          url: 'http://localhost:3000/movie',
          method: 'get',
          params: {   //query字符串查询参数
            name: '让子弹飞'
          }
        })
        console.log(response)
        console.log(response.data)
      } catch (error) {   //请求失败的情况
        console.log(error)
        console.log(error.message)
      }
    }
    //post请求 async await
    document.getElementById('btn3').onclick = async () => {
      try {
        let response = await axios({
          url: 'http://localhost:3000/movie', //指定param参数
          method: 'post',
          data: {   //请求体json格式
            name: '阿凡达'
          },
          data: 'name=阿凡达'  //请求体 query字符串格式

        })
        console.log(response)
        console.log(response.data)
      } catch (error) {
        console.log(error)
        console.log(error.message)
      }
    }
    //put请求 async await
    document.getElementById('btn4').onclick = async () => {
      try {
        let response = axios({
          url: 'http://localhost:3000/movie/4', //指定param参数
          method: 'put',
          data: {
            name: '欸嘿嘿'
          }
        })
        console.log(response)
        console.log(response.data)
      } catch (error) {
        console.log(error)
        console.log(error.message)
      }
    }
    //delete请求 async await
    document.getElementById('btn5').onclick = async () => {
      try {
        let response = axios({
          url: 'http://localhost:3000/movie/10', //指定param参数
          method: 'delete'
        })
        console.log(response)
        console.log(response.data)
      } catch (error) {
        console.log(error)
        console.log(error.message)
      }
    }
  </script>
</body>

</html>